<template>
	<div class="page_wrap">
		<ul ref='img_box' class="img_box">
			<li v-for="(img, index) in imgs" :class="{subjoin: img.liStyle=='subjoin'}" :style="{left: img.left, top: img.top, transform: img.rotate}" @click="addClass(img, index)">
				<img :src="img.imgSrc" alt="" />
			</li>
		</ul>
	</div>
</template>

<script>

	export default {
		data() {
			return {
				imgs: [],
			}
		},
		created() {},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				let box = this.$refs.main;
				let x = 0;
				let y = 0;
				if(box) {
					x = box.getBoundingClientRect().x - 200 || 0;
					y = box.getBoundingClientRect().y - 260 || 0;
				}
				var screenWidth = this.getViewportSize().width - x;
				var screenHeight = this.getViewportSize().height - y;

				for(let i = 0; i < 8; i++) {
					let obj = {
						imgSrc: require("../images/00" + (i + 1) + ".jpg"),
						liStyle: '',
						//随机的位置
						left: x + parseInt(Math.random() * screenWidth) + "px",
						top: y + parseInt(Math.random() * screenHeight) + "px",
						//随机的角度
						rotate: "rotate(" + parseInt(Math.random() * 721) + "deg" + ")",
					}
					this.imgs.push(obj)
				}
			},
			addClass(item, index) {
				console.log(item, index);
				this.imgs.forEach((x, indexX) => {
					x.liStyle = '';
					if(index == indexX) {
						x.liStyle = 'subjoin';
						x.rotate = "rotate(" + 0 + "deg" + ")";
					}
				})

			},

		}
	};
</script>

<style lang="scss" scoped>
	@import '~assets/css/mixin';
	.page_wrap {
		height: 100%;
		background: #fff;
	}
	
	.img_box {
		width: 100%;
		height: 100%;
		position: relative;
		li {
			width: 200px;
			height: 260px;
			position: absolute;
			transition: all 1s;
			overflow: hidden;
			img {
				width: 100%;
			}
		}
		.subjoin {
			position: fixed !important;
			z-index: 99;
			top: 50% !important;
			left: 50% !important;
			box-shadow: 0 0 15px #fff;
			/*transform: rotate(0deg) scale(2.2, 2.2) translate(-50%, -50%) !important;*/
			/*transform: rotate(0deg);*/
			transform: scale(2.2, 2.2) !important;
		}
	}
</style>